<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Question Bank Management</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8fafc;
        }

        .glass-sidebar {
            background: #1e293b;
            color: #f8fafc;
        }

        .table-container {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            border-radius: 12px;
            background: white;
            overflow: hidden;
        }

        .badge {
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
        }

        .badge-easy { background: #dcfce7; color: #166534; }
        .badge-medium { background: #fef9c3; color: #854d0e; }
        .badge-hard { background: #fee2e2; color: #991b1b; }
        
        .status-approved { background: #e0f2fe; color: #075985; }
        .status-pending { background: #fef3c7; color: #92400e; }

        .search-input:focus {
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
            border-color: #3b82f6;
        }

        .action-btn {
            transition: all 0.2s ease;
        }

        .action-btn:hover {
            transform: translateY(-1px);
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 10px;
        }
    </style>
</head>
<body class="flex min-h-screen">

    <!-- Sidebar -->
    <aside class="w-64 glass-sidebar hidden lg:flex flex-col flex-shrink-0">
        <div class="p-6 border-b border-slate-700">
            <h1 class="text-xl font-bold flex items-center gap-2">
                <i class="fas fa-graduation-cap text-blue-400"></i>
                EduPortal Admin
            </h1>
        </div>
        <nav class="flex-1 p-4 space-y-2">
            <a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-800 transition-colors">
                <i class="fas fa-tachometer-alt opacity-70"></i> Dashboard
            </a>
            <a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg bg-blue-600 text-white font-medium shadow-lg shadow-blue-500/20">
                <i class="fas fa-book-open"></i> Question Bank
            </a>
            <a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-800 transition-colors">
                <i class="fas fa-users opacity-70"></i> Students
            </a>
            <a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-800 transition-colors">
                <i class="fas fa-chart-line opacity-70"></i> Analytics
            </a>
        </nav>
        <div class="p-4 border-t border-slate-700">
            <div class="flex items-center gap-3 px-4 py-2">
                <div class="w-8 h-8 rounded-full bg-slate-500 flex items-center justify-center text-xs font-bold">JD</div>
                <div class="flex flex-col">
                    <span class="text-sm font-medium">John Doe</span>
                    <span class="text-[10px] text-slate-400 uppercase">Instructor</span>
                </div>
            </div>
        </div>
    </aside>

    <!-- Main Content -->
    <main class="flex-1 flex flex-col min-w-0">
        <!-- Top Nav -->
        <header class="bg-white border-b h-16 flex items-center justify-between px-8 sticky top-0 z-10">
            <div class="flex items-center gap-4">
                <button class="lg:hidden text-slate-600"><i class="fas fa-bars"></i></button>
                <h2 class="text-lg font-semibold text-slate-800">Question Bank</h2>
            </div>
            <div class="flex items-center gap-4">
                <div class="relative hidden sm:block">
                    <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm"></i>
                    <input type="text" placeholder="Global search..." class="pl-10 pr-4 py-1.5 rounded-full border bg-slate-50 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 w-64 transition-all">
                </div>
                <button class="w-10 h-10 rounded-full hover:bg-slate-100 flex items-center justify-center relative">
                    <i class="far fa-bell text-slate-600"></i>
                    <span class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border-2 border-white"></span>
                </button>
            </div>
        </header>

        <div class="p-8">
            <!-- Summary Stats -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
                <div class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
                    <p class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Total Questions</p>
                    <p class="text-2xl font-bold text-slate-800">1,284</p>
                </div>
                <div class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
                    <p class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Shared Questions</p>
                    <p class="text-2xl font-bold text-slate-800 text-blue-600">432</p>
                </div>
                <div class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
                    <p class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Pending Approval</p>
                    <p class="text-2xl font-bold text-slate-800 text-amber-600">18</p>
                </div>
                <div class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
                    <p class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Last Updated</p>
                    <p class="text-2xl font-bold text-slate-800">Today</p>
                </div>
            </div>

            <!-- Toolbar -->
            <div class="flex flex-col lg:flex-row gap-4 mb-6 justify-between items-start lg:items-center">
                <div class="flex flex-wrap gap-3">
                    <select class="px-4 py-2 rounded-lg border bg-white text-sm text-slate-600 focus:outline-none focus:ring-2 focus:ring-blue-500/20">
                        <option>All Types</option>
                        <option>Multiple Choice</option>
                        <option>True/False</option>
                    </select>
                    <select class="px-4 py-2 rounded-lg border bg-white text-sm text-slate-600 focus:outline-none focus:ring-2 focus:ring-blue-500/20">
                        <option>Difficulty</option>
                        <option>Easy</option>
                        <option>Medium</option>
                        <option>Hard</option>
                    </select>
                    <select class="px-4 py-2 rounded-lg border bg-white text-sm text-slate-600 focus:outline-none focus:ring-2 focus:ring-blue-500/20">
                        <option>Status</option>
                        <option>Approved</option>
                        <option>Pending</option>
                    </select>
                </div>
                <div class="flex gap-3 w-full lg:w-auto">
                    <button class="flex-1 lg:flex-none px-5 py-2.5 bg-slate-800 text-white rounded-lg text-sm font-medium hover:bg-slate-700 action-btn flex items-center justify-center gap-2">
                        <i class="fas fa-file-export"></i> Export
                    </button>
                    <button class="flex-1 lg:flex-none px-5 py-2.5 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 action-btn flex items-center justify-center gap-2 shadow-lg shadow-blue-500/30">
                        <i class="fas fa-plus"></i> New Question
                    </button>
                </div>
            </div>

            <!-- Table -->
            <div class="table-container">
                <div class="overflow-x-auto">
                    <table class="w-full text-left">
                        <thead>
                            <tr class="bg-slate-50 border-b border-slate-200">
                                <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase">Question Details</th>
                                <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase">Category / Course</th>
                                <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase">Difficulty</th>
                                <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase">Status</th>
                                <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase text-right">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            <!-- Row 1 -->
                            <tr class="hover:bg-slate-50/80 transition-colors">
                                <td class="px-6 py-5">
                                    <div class="flex flex-col">
                                        <span class="text-slate-800 font-semibold mb-1 truncate max-w-xs">What is the capital of France?</span>
                                        <div class="flex gap-2">
                                            <span class="text-[10px] bg-slate-100 text-slate-500 px-1.5 py-0.5 rounded">MCQ</span>
                                            <span class="text-[10px] bg-blue-50 text-blue-500 px-1.5 py-0.5 rounded">#Geography</span>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-5">
                                    <div class="flex flex-col">
                                        <span class="text-sm font-medium text-slate-700">General Knowledge</span>
                                        <span class="text-xs text-slate-400">Intro to Humanities</span>
                                    </div>
                                </td>
                                <td class="px-6 py-5">
                                    <span class="badge badge-easy">Easy</span>
                                </td>
                                <td class="px-6 py-5">
                                    <span class="badge status-approved">Approved</span>
                                </td>
                                <td class="px-6 py-5 text-right">
                                    <div class="flex justify-end gap-2">
                                        <button class="p-2 text-slate-400 hover:text-blue-600 transition-colors" title="Edit"><i class="fas fa-pen text-sm"></i></button>
                                        <button class="p-2 text-slate-400 hover:text-red-600 transition-colors" title="Delete"><i class="fas fa-trash text-sm"></i></button>
                                    </div>
                                </td>
                            </tr>

                            <!-- Row 2 -->
                            <tr class="hover:bg-slate-50/80 transition-colors">
                                <td class="px-6 py-5">
                                    <div class="flex flex-col">
                                        <span class="text-slate-800 font-semibold mb-1 truncate max-w-xs">Explain the process of photosynthesis in detail.</span>
                                        <div class="flex gap-2">
                                            <span class="text-[10px] bg-slate-100 text-slate-500 px-1.5 py-0.5 rounded">Long Answer</span>
                                            <span class="text-[10px] bg-blue-50 text-blue-500 px-1.5 py-0.5 rounded">#Biology</span>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-5">
                                    <div class="flex flex-col">
                                        <span class="text-sm font-medium text-slate-700">Natural Sciences</span>
                                        <span class="text-xs text-slate-400">General Biology 101</span>
                                    </div>
                                </td>
                                <td class="px-6 py-5">
                                    <span class="badge badge-medium">Medium</span>
                                </td>
                                <td class="px-6 py-5">
                                    <span class="badge status-pending">Pending</span>
                                </td>
                                <td class="px-6 py-5 text-right">
                                    <div class="flex justify-end gap-2">
                                        <button class="p-2 text-slate-400 hover:text-blue-600 transition-colors" title="Edit"><i class="fas fa-pen text-sm"></i></button>
                                        <button class="p-2 text-slate-400 hover:text-red-600 transition-colors" title="Delete"><i class="fas fa-trash text-sm"></i></button>
                                    </div>
                                </td>
                            </tr>

                            <!-- Row 3 -->
                            <tr class="hover:bg-slate-50/80 transition-colors">
                                <td class="px-6 py-5">
                                    <div class="flex flex-col">
                                        <span class="text-slate-800 font-semibold mb-1 truncate max-w-xs">Solve for x: 3x^2 + 5x - 2 = 0</span>
                                        <div class="flex gap-2">
                                            <span class="text-[10px] bg-slate-100 text-slate-500 px-1.5 py-0.5 rounded">Calculation</span>
                                            <span class="text-[10px] bg-blue-50 text-blue-500 px-1.5 py-0.5 rounded">#Math</span>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-5">
                                    <div class="flex flex-col">
                                        <span class="text-sm font-medium text-slate-700">Mathematics</span>
                                        <span class="text-xs text-slate-400">Calculus I</span>
                                    </div>
                                </td>
                                <td class="px-6 py-5">
                                    <span class="badge badge-hard">Hard</span>
                                </td>
                                <td class="px-6 py-5">
                                    <span class="badge status-approved">Approved</span>
                                </td>
                                <td class="px-6 py-5 text-right">
                                    <div class="flex justify-end gap-2">
                                        <button class="p-2 text-slate-400 hover:text-blue-600 transition-colors" title="Edit"><i class="fas fa-pen text-sm"></i></button>
                                        <button class="p-2 text-slate-400 hover:text-red-600 transition-colors" title="Delete"><i class="fas fa-trash text-sm"></i></button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="bg-white px-6 py-4 border-t border-slate-200 flex items-center justify-between">
                    <span class="text-xs text-slate-500">Showing 1 to 3 of 1,284 results</span>
                    <div class="flex gap-2">
                        <button class="px-3 py-1.5 border rounded-md text-sm text-slate-400 cursor-not-allowed">Previous</button>
                        <button class="px-3 py-1.5 border border-blue-600 bg-blue-50 text-blue-600 rounded-md text-sm font-semibold">1</button>
                        <button class="px-3 py-1.5 border rounded-md text-sm text-slate-600 hover:bg-slate-50">2</button>
                        <button class="px-3 py-1.5 border rounded-md text-sm text-slate-600 hover:bg-slate-50">3</button>
                        <button class="px-3 py-1.5 border rounded-md text-sm text-slate-600 hover:bg-slate-50">Next</button>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Modal Mockup for Notifications (Optional Logic) -->
    <div id="toast" class="fixed bottom-6 right-6 bg-slate-800 text-white px-4 py-3 rounded-lg shadow-xl flex items-center gap-3 transform translate-y-24 transition-transform duration-300">
        <i class="fas fa-check-circle text-green-400"></i>
        <span class="text-sm font-medium">Data refreshed successfully!</span>
    </div>

    <script>
        // Simple interactivity for the demo
        document.querySelectorAll('.action-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                const toast = document.getElementById('toast');
                toast.classList.remove('translate-y-24');
                setTimeout(() => {
                    toast.classList.add('translate-y-24');
                }, 3000);
            });
        });
    </script>
</body>
</html>